<template>
  <el-dialog :visible.sync="visible" width="70%" custom-class="default-dialog" :close-on-click-modal="false"
    @close="cancel" append-to-body>
    <div slot="title">
      <img src="@/assets/img/edit.png" alt="">
      <span>字典配置项</span>
    </div>
    <el-row>
      <el-col :span="6" style="padding: 20px">
        <el-tree :data="treeList" default-expand-all :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="18">
        <div class="handlePart">
          <el-form :inline="true" :model="form">
            <el-form-item>
              <div>所属上级：{{ nodeData ? nodeData.label : '无' }}</div>
            </el-form-item>
            <el-form-item style="float: right;">
              <el-button size="small" type="primary" icon="el-icon-plus" @click="add">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tablePart">
          <el-table :data="list" :height="'calc(100vh - 290px)'" stripe style="width: 100%">
            <el-table-column prop="label" label="字典名称" align="center">
              <template slot-scope="scope">
                <el-input v-if="scope.row.edit" size="small" v-model="scope.row.label"></el-input>
                <div v-else>{{ scope.row.label }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="字典值" align="center">
              <template slot-scope="scope">
                <el-input v-if="scope.row.edit" size="small" v-model="scope.row.value"></el-input>
                <div v-else>{{ scope.row.value }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" align="center">
              <template slot-scope="scope">
                <el-input v-if="scope.row.edit" size="small" v-model.number="scope.row.sort"></el-input>
                <div v-else>{{ scope.row.sort }}</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="160">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-circle-check" title="保存" v-if="scope.row.edit"
                  @click="save(scope.row)"></el-button>
                <el-button type="text" icon="el-icon-edit" title="编辑" v-else @click="scope.row.edit = true"></el-button>
                <el-button type="text" icon="el-icon-delete" title="删除" @click="del(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <span slot="footer">
      <el-button size="small" @click="cancel">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      form: {
        keywords: '',
        orderBy: "create_time desc"
      },
      treeList: [],
      list: [],
      info: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      nodeData: null
    };
  },
  methods: {
    showModal(row) {
      this.visible = true
      this.nodeData = null
      this.info = row
      this.listInit()
    },
    handleNodeClick(data) {
      console.log(data);
      if(this.nodeData && this.nodeData.sysDictDetailId == data.sysDictDetailId){
        this.nodeData = null
        this.list = this.treeList
      }else {
        this.nodeData = data
        this.list = JSON.parse(JSON.stringify(data.children))
      }
      this.list.forEach(l => {
        this.$set(l, 'edit', false)
        this.$set(l, 'uid', Math.floor(Math.random() * 10) + 1)
      })
    },
    // list
    listInit() {
      this.$api.getDictDetail({ dicGuid: this.info.dictGuid }).then(res => {
        if (res && res.code == 200) {
          let data = res.data || []
          if(this.nodeData){
            let list = data.filter(l => l.sysDictDetailId == this.nodeData.sysDictDetailId)[0].children
            this.list = JSON.parse(JSON.stringify(list))
          }else {
            this.list = JSON.parse(JSON.stringify(data))
          }
          this.list.forEach(l => {
            this.$set(l, 'edit', false)
            this.$set(l, 'uid', Math.floor(Math.random() * 10) + 1)
          })
          this.treeList = data
        }
      })
    },
    // 新增
    add() {
      let item = {
        "sysDictDetailId": null,
        "dictDetailGuid": null,
        "label": "",
        "value": '',
        "parentDictDetailGuid": this.nodeData ? this.nodeData.dictDetailGuid : null,
        "sort": null,
        "dictGuid": this.info.dictGuid,
        "children": [],
        edit: true,
        uid: Math.floor(Math.random() * 10) + 1
      }
      this.list.unshift(item)
    },
    // 保存
    save(row) {
      if (!row.dictDetailGuid) {
        this.$api.addDictDetail(row).then(res => {
          if (res && res.code == 200) {
            this.listInit()
          }
        })
      } else {
        this.$api.updateDictDetail(row).then(res => {
          if (res && res.code == 200) {
            this.listInit()
          }
        })
      }
    },
    // 删除
    del(row) {
      this.$confirm('数据删除后将无法恢复，确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(row.sysDictDetailId){
          this.$api.delDictDetail([row.sysDictDetailId]).then(res => {
            if (res && res.code == 200) {
              this.$notify.success({
                title: '成功',
                message: '删除成功!'
              });
              this.listInit()
            }
          })
        }else {
          this.list.forEach((l, idx) => {
            if (l.uid == row.uid) {
              this.list.splice(idx, 1)
            }
          })
        }
      }).catch(() => { });
    },
    // 取消
    cancel() {
      this.visible = false;
    },
  }
};
</script>
